import CDioTable from '@/components/c_dio_table';
import React from 'react';

const dioTableData:cType.tableDioProTp={
  btnTitle:'新增个人信息',
  formOption: {
    dioOption: {
      title: '新增/编辑个人信息',
    },
    formOption: {
      saveUrl: '/api/person',
      initiaData: { experience: [{}] },
      items: [
        { pname: 'name', plabel: '姓名' },
        { pname: 'education', plabel: '学历' },
        { pname: 'school', plabel: '学校' },
        { pname: 'phone', plabel: '电话' },
        { pname: 'qqLink', plabel: 'QQ' },
        { pname: 'wxLink', plabel: '微信' },
        { pname: 'email', plabel: '邮箱' },
        { pname: 'home', plabel: '户籍' },
        { pname: 'evaluate', plabel: '自我评价' },
        {
          pname: 'experience',
          plabel: '工作经历',
          typeItem: 'add',
          childitems: [
            { pname: 'time', plabel: '时间', style: { width: '200px', display: 'block' }, col: 12 },
            {
              pname: 'company',
              plabel: '公司',
              style: { width: '200px', display: 'block' },
              col: 12,
            },
            { pname: 'job', plabel: '职位', style: { width: '200px', display: 'block' }, col: 12 },
          ],
        },
      ],
    },
  },
  tableOption: {
    getApi: '/api/person',
    handleTable: true,
    tableAfterGet:(dataList: any): any => {
      dataList.map((item: any) => {
        return (item.experience = JSON.parse(item.experience || '[]'));
      });
      return dataList;
    },
    columns: [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        width: '40px',
      },
      {
        title: '姓名',
        dataIndex: 'name',
        width: '80px',
        key: 'name',
      },
      {
        title: '学历',
        dataIndex: 'education',
        width: '60px',
        key: 'education',
      },
      {
        title: '学校',
        dataIndex: 'school',
        width: '70px',
        key: 'school',
      },
      {
        title: '电话',
        dataIndex: 'phone',
        width: '80px',
        key: 'phone',
        render: (text:string) => (
          <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>{text}</div>
        ),
      },
      {
        title: 'QQ',
        dataIndex: 'qqLink',
        width: '80px',
        key: 'qqLink',
        render: (text:string) => (
          <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>{text}</div>
        ),
      },
      {
        title: '微信',
        dataIndex: 'wxLink',
        width: '80px',
        key: 'wxLink',
        render: (text:string) => (
          <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>{text}</div>
        ),
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        width: '100px',
        key: 'email',
        render: (text:string) => (
          <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>{text}</div>
        ),
      },
      {
        title: '户籍',
        dataIndex: 'home',
        width: '70px',
        key: 'home',
      },
      {
        title: '自我评价',
        dataIndex: 'evaluate',
        width: '260px',
        key: 'evaluate',
      },
      {
        title: '工作经历',
        dataIndex: 'experience',
        key: 'experience',
        render: (_:any, { experience }:{experience:any}) => (
          <>
            {experience.map((item: any) => {
              return (
                <div key={item.time}>
                  {item.time}——{item.company}
                </div>
              );
            })}
          </>
        ),
      },
    ],
  }
}
const App: React.FC = () => {
  return (
    <div>
      <CDioTable {...dioTableData}></CDioTable>
    </div>
  );
};
export default App;
